<template>
    <div class="tzb">
        <h1>tab切换</h1>

        <div class="box-img">
            <div v-for="(item, index) in data.imgs" :key="index" @click="tabtoggle(index)">
                <img :src="item" class="img" />
            </div>
        </div>

        <div>
            <img class="image" :src="item" v-for="(item, index) in data.imgs" :key="index"
                v-show="data.activeIndex == index" />
        </div>
    </div>
</template>
<script setup>
import { ref, reactive } from "vue";

const data = reactive({
    imgs: [
        "https://wx2.sinaimg.cn/mw690/ad6a65e1gy1h3li25kaxnj21kw1kwn4z.jpg",
        "https://wx3.sinaimg.cn/mw690/ad6a65e1gy1h3li26ksoyj20u00u0acs.jpg",
        "https://wx1.sinaimg.cn/mw690/ad6a65e1gy1h3lzbenrcpj21kw1kwtfl.jpg",
        "https://wx4.sinaimg.cn/mw690/ad6a65e1ly1h3lzbez41bj21kw1kwq9y.jpg"
    ],
    activeIndex: 0,
});

const tabtoggle = (i) => {
    data.activeIndex = i;
};
</script>
<style lang="scss" scoped>
.tzb {
    text-align: center;

    .box-img {
        width: 100%;
        display: flex;
        align-items: center;

        .img {
            width: 250px;
            height: 250px;
            margin: 0 20px;
        }
    }
}

.image {
    width: 200px;
    height: 250px;
}
</style>